﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>系统初始化</title>
    @Styles.Render("~/bundles/css")
    <link rel="stylesheet" href="~/layui/extend/steps/style.css">
    <style>
        .layui-table, .layui-table-view {
            margin: 0;
        }

        .layui-form-item {
            min-height: 30px;
        }
    </style>
</head>
<body>
    @*<blockquote class="layui-elem-quote layui-text">
            系统初始化
        </blockquote>*@
    <div id="step_demo" class="step-body" style="padding:20px 0;background:#fdfdfd;border:1px solid #ccc;">
        <div class="step-header" style="width:80%;overflow: hidden;">
            <ul>
                <li>
                    <span class="step-name">选择数据库类型</span>
                </li>
                <li>
                    <span class="step-name">初始化数据</span>
                </li>
                <li>
                    <span class="step-name">设计模型</span>
                </li>
                <li>
                    <span class="step-name">设计页面</span>
                </li>
                <li>
                    <span class="step-name">生成代码</span>
                </li>
                <li>
                    <span class="step-name">编辑菜单</span>
                </li>
                <li>
                    <span class="step-name">设计完成</span>
                </li>

            </ul>
        </div>


    </div>
    <div class="layui-row" style="">
        @*<div class="layui-col-md2">
            <div class="layui-bg-green">
                <table class="layui-table" id="tableFields"></table>
            </div>
        </div>*@
        <div class="layui-col-md12">
            <div class="layui-bg-gray">
                <form class="layui-form" action="">

                    @{ foreach (var f in ViewBag.fieldList)
                        {
                            if (f.FieldName != "id")
                            {
                                <div class="layui-form-item">
                                    <div class="layui-block">
                                        <label class="layui-form-label">@f.FieldDisplayName</label>
                                        @{
                                            if (f.DisplayType == "DropDownList")
                                            {
                                                <div class="layui-input-block">
                                                    @Html.B_DropDownList("站点类别", "moniType")
                                                </div>
                                            }
                                            else if (f.DisplayType == "Text")
                                            {

                                            }
                                            else
                                            {
                                                <div class="layui-input-block">
                                                    <input type="tel" name="@f.FieldName" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                                </div>
                                            }

                                        }

                                    </div>


                                </div>
                            }

                        }

                    }
                    @*<div class="layui-form-item">
                            <div class="layui-block">
                                <label class="layui-form-label">单行输入框</label>
                                <div class="layui-input-block">
                                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
                                </div>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">验证手机</label>
                                <div class="layui-input-inline">
                                    <input type="tel" name="phone" lay-verify="required|phone" autocomplete="off" class="layui-input">
                                </div>
                            </div>


                        </div>


                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">分组选择框</label>
                                <div class="layui-input-inline">
                                    <select name="quiz">
                                        <option value="">请选择问题</option>
                                        <optgroup label="城市记忆">
                                            <option value="你工作的第一个城市">你工作的第一个城市</option>
                                        </optgroup>
                                        <optgroup label="学生时代">
                                            <option value="你的工号">你的工号</option>
                                            <option value="你最喜欢的老师">你最喜欢的老师</option>
                                        </optgroup>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">搜索选择框</label>
                                <div class="layui-input-inline">
                                    <select name="modules" lay-verify="required" lay-search="">
                                        <option value="">直接选择或搜索选择</option>
                                        <option value="1">layer</option>
                                        <option value="2">form</option>
                                        <option value="3">layim</option>
                                        <option value="4">element</option>
                                        <option value="5">laytpl</option>
                                        <option value="6">upload</option>
                                        <option value="7">laydate</option>
                                        <option value="8">laypage</option>
                                        <option value="9">flow</option>
                                        <option value="10">util</option>
                                        <option value="11">code</option>
                                        <option value="12">tree</option>
                                        <option value="13">layedit</option>
                                        <option value="14">nav</option>
                                        <option value="15">tab</option>
                                        <option value="16">table</option>
                                        <option value="17">select</option>
                                        <option value="18">checkbox</option>
                                        <option value="19">switch</option>
                                        <option value="20">radio</option>
                                    </select>
                                </div>
                            </div>
                        </div>



                        <div class="layui-form-item">
                            <div class="layui-block">
                                <label class="layui-form-label">复选框</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="like[write]" title="写作">
                                    <input type="checkbox" name="like[read]" title="阅读" checked="">
                                    <input type="checkbox" name="like[game]" title="游戏">
                                </div>
                            </div>
                        </div>

                        <div class="layui-form-item" pane="">
                            <div class="layui-block">
                                <label class="layui-form-label">原始复选框</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="like1[write]" lay-skin="primary" title="写作" checked="">
                                    <input type="checkbox" name="like1[read]" lay-skin="primary" title="阅读">
                                    <input type="checkbox" name="like1[game]" lay-skin="primary" title="游戏" disabled="">
                                </div>
                            </div>
                        </div>*@


                    @*<div class="layui-form-item">
                            <div class="layui-block">
                                <label class="layui-form-label">单选框</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="sex" value="男" title="男" checked="">
                                    <input type="radio" name="sex" value="女" title="女">
                                    <input type="radio" name="sex" value="禁" title="禁用" disabled="">
                                </div>
                            </div>

                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">普通文本域</label>
                            <div class="layui-input-block">
                                <textarea placeholder="请输入内容" class="layui-textarea"></textarea>
                            </div>
                        </div>*@

                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        </div>
                    </div>
                </form>

            </div>
        </div>
    </div>
    <div class="layui-row" style="border:1px solid #ccc;display:none;">
        <div class="layui-col-md2">
            &nbsp;
        </div>
        <div class="layui-col-md10">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>字段修改</legend>
            </fieldset>
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">字段中文名</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="phone" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">字段名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" lay-verify="required" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">字段长度</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" lay-verify="required|number" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">代码字典</label>
                        <div class="layui-input-inline">
                            <select name="quiz1">
                                <option value="">请选择</option>
                                <option value="男女" selected="">男女</option>
                                <option value="站点类型">站点类型</option>
                                <option value="是否">是否</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-block">
                        <div class="layui-inline">
                            <label class="layui-form-label">显示方式</label>
                            <div class="layui-input-block">
                                <input type="radio" name="sex" value="Text" title="文本" checked="">
                                <input type="radio" name="sex" value="Number" title="数字">
                                <input type="radio" name="sex" value="DatePicker" title="日期">
                                <input type="radio" name="sex" value="Select" title="下拉菜单">
                                <input type="radio" name="sex" value="CheckBox" title="多选框列表">
                                <input type="radio" name="sex" value="Radio" title="单选框列表">
                                <input type="radio" name="sex" value="Tree" title="树">
                                <input type="radio" name="sex" value="textarea" title="多行文本">
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
    @*<button id="preBtn">上一步</button>
        <button id="nextBtn">下一步</button>
        <button id="goBtn">跳转的指定的步骤</button>*@


    <div>

    </div>
    <script>
        var appUrl = '@Url.Action("")';
    </script>
    <script src="~/js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/layui/layui.js"></script>
    <script type="text/javascript" src="~/layui/config.js"></script>
    <script>


        layui.use(['jquery', 'steps','form','table'], function () {
            var table = layui.table;
            var $ = layui.$;

            var $step = $("#step_demo").step();

            $("#preBtn").click(function (event) {
                $step.preStep();//上一步
            });
            $("#nextBtn").click(function (event) {
                $step.nextStep();//下一步
            });
            $("#goBtn").click(function (event) {
                $step.goStep(3);//到指定步
            });

            function bindDragEvent() {
                $('.layui-inline,.layui-block').attr('draggable', 'true');
                $('.layui-inline,.layui-block').on('dragstart', function (ev) {
                    console.log($(this).index() + "|" + $(this).parent().index());
                    console.log(ev)
                    ev.originalEvent.dataTransfer.setData("Text", $(this).index() + "|" + $(this).parent().index());
                });
                $('.layui-form-item').on('dragover', function (ev) {
                    ev.preventDefault();
                });


                $('.layui-form-item').on('drop', function (ev) {
                    ev.preventDefault();
                    var data = ev.originalEvent.dataTransfer.getData("Text");
                    var rowIndex = data.split('|')[1];
                    var itemIndex = data.split('|')[0];
                    var oDiv = $('.layui-form-item').eq(rowIndex).find('>div').eq(itemIndex);
                    var oBlock = oDiv.find('.layui-input-block');
                    if (oBlock.length) {
                        oDiv.removeClass('layui-block').addClass('layui-inline');
                        //oBlock.removeClass('layui-input-block').addClass('layui-input-inline');
                    }
                    if ($(this).find('.layui-inline').length == 0) {
                        oDiv.find('.layui-input-inline').removeClass('layui-input-inline').addClass('layui-input-block');
                    }
                    if ($(this).find('.layui-block').length > 0) {
                        $(this).find('.layui-block').removeClass('layui-block').addClass('layui-inline');
                    }
                    if ($(this).find('>div').length == 0) {
                        oDiv.removeClass('layui-inline').addClass('layui-block');
                        oDiv.find('.layui-input-inline').removeClass('layui-input-inline').addClass('layui-input-block');
                    }
                    $(this).append(oDiv);
                });
            }
            bindDragEvent();
            function fieldEdit(field) {



            }

            $('.layui-form-label').on('dblclick', function () {

                fieldEdit($(this));
            })


            @*table.render({
                elem: '#tableFields'
                , url: '@Url.Action("getClassFields")?className='+ "@Request["c"]"
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { field: 'FieldName', width: 100,  title: '字段名' }
                    , { field: 'FieldDisplayName', width: 100,    title: '中文', sort: true }
                    , { field: 'DisplayType', title: '显示类型' }

                ]],
                skin: 'line' //表格风格
            });*@

            console.log(table);
        });
    </script>
</body>


</html>
